<template>
  <div class="app-container" style="height: 100%">
    <div
      class="app-container-inner"
      style="display: flex; flex-direction: column"
      v-loading="loading"
      element-loading-text="加载中..."
    >
      <div class="header flex-justify-between">
        <el-button class="btn_back" plain color="#007cff" @click="goBack">旧件退回</el-button>
        <!-- 搜索条件 -->
        <div class="search">
          <!-- 日期范围 -->
          <DateRange @change="handleDateChange" ref="dateRangeRef" />

          <!-- 配件单号 -->
          <el-input
            clearable
            v-model="data.workSpareNo"
            @keyup.enter="getspareWork"
            placeholder="配件单号"
            style="height: 28px"
            @clear="getspareWork"
          />

          <!-- 工单单号 -->
          <el-input
            clearable
            v-model="data.workNo"
            @keyup.enter="getspareWork"
            placeholder="工单单号"
            @clear="getspareWork"
          />

          <!-- 状态 -->
          <el-select
            v-model="data.status"
            placeholder="状态"
            @change="getspareWork"
            filterable
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :value="item.value"
              :label="item.name"
            />
          </el-select>

          <!-- 申请类型 -->
          <el-select
            v-model="data.type"
            placeholder="申请类型"
            @change="getspareWork"
            filterable
            clearable
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :value="item.value"
              :label="item.name"
            />
          </el-select>

          <!-- 旧件处理方式 -->
          <el-select
            v-model="data.oldCopeWay"
            placeholder="旧件处理方式"
            @change="getspareWork"
            filterable
            clearable
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :value="item.value"
              :label="item.name"
            />
          </el-select>

          <!-- 配件类型 -->
          <el-select
            v-model="data.networkSpareType"
            placeholder="配件类型"
            @change="getspareWork"
            filterable
            clearable
          >
            <el-option
              v-for="item in options3"
              :key="item.value"
              :value="item.value"
              :label="item.name"
            />
          </el-select>

          <!-- 按钮组 -->
          <div class="btn-group">
            <button class="search-btn btn-bg1" @click="getspareWork">
              <el-icon>
                <Search />
              </el-icon>
              <span>搜索</span>
            </button>
            <button class="reset-btn btn-bg5" @click="onReset">
              <el-icon>
                <RefreshRight />
              </el-icon>
              <span>重置</span>
            </button>
          </div>
        </div>
      </div>
      <div class="table-ele" style="flex: 1; position: relative">
        <el-table
          :border="true"
          stripe
          height="100%"
          style="position: absolute"
          resizable
          :data="tableDataList"
        >
          <template #empty>
            <el-empty description="暂无数据" />
          </template>

          <!-- 序号 -->
          <el-table-column show-overflow-tooltip label="序号" type="index" fixed="left" width="50">
            <template v-slot="scope">
              <span style="padding: 0 !important">{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <!-- 配件单号 -->
          <el-table-column
            show-overflow-tooltip
            fixed="left"
            prop="code"
            label="配件单号"
            min-width="170"
          >
            <template #default="scope">
              <span class="number" @click="viewDetail(scope.row.id)">{{ scope.row.code }}</span>
            </template>
          </el-table-column>

          <!-- 工单单号 -->
          <el-table-column show-overflow-tooltip prop="workNo" label="工单单号" width="160">
            <template #default="scope">
              <span class="number" @click="goOrder(scope.row.workId)">{{ scope.row.workNo }}</span>
            </template>
          </el-table-column>

          <!-- 状态 -->
          <el-table-column prop="state" label="状态" width="84">
            <template #default="scope">
              <el-tag type="warning" v-if="scope.row.status == 1">待审核</el-tag>
              <el-tag v-if="scope.row.status == 2">已通过</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 3">已驳回</el-tag>
              <el-tag type="info" v-if="scope.row.status == 4">已撒回</el-tag>
              <el-tag type="info" v-if="scope.row.status == 5">已取消</el-tag>
            </template>
          </el-table-column>

          <!-- 申请类型 -->
          <el-table-column show-overflow-tooltip prop="type" label="申请类型" width="100" />

          <!-- 配件名称 -->
          <el-table-column show-overflow-tooltip prop="model" label="配件名称" width="200" />

          <!-- 旧件处理方式 -->
          <el-table-column show-overflow-tooltip label="旧件处理方式" width="100">
            <template v-slot="i">
              {{ i.row.oldCopeWay == 1 ? '废弃' : i.row.oldCopeWay == 2 ? '旧件退回' : '' }}
            </template>
          </el-table-column>

          <!-- 申请数量 -->
          <el-table-column show-overflow-tooltip prop="applyTotalQty" label="申请数量" width="80" />

          <!-- 申请总金额 -->
          <el-table-column
            show-overflow-tooltip
            prop="applyTotalPrice"
            label="申请总金额"
            width="90"
          >
            <template v-slot="i"> ￥{{ i.row.applyTotalPrice }} </template>
          </el-table-column>

          <!-- 审批数量 -->
          <el-table-column show-overflow-tooltip prop="checkTotalQty" label="审批数量" width="80" />

          <!-- 审批总金额 -->
          <el-table-column
            show-overflow-tooltip
            prop="checkTotalPrice"
            label="审批总金额"
            width="90"
          >
            <template v-slot="i"> ￥{{ i.row.checkTotalPrice }} </template>
          </el-table-column>

          <!-- 申请人员 -->
          <el-table-column show-overflow-tooltip prop="applyEmp" label="申请人员" width="120" />

          <!-- 审核人员 -->
          <el-table-column show-overflow-tooltip prop="reviewEmp" label="审核人员" width="120" />

          <!-- 申请服务商 -->
          <el-table-column show-overflow-tooltip prop="network" label="申请服务商" width="150" />

          <!-- 申请时间 -->
          <el-table-column show-overflow-tooltip prop="createTime" label="申请时间" width="128" />

          <!-- 审核时间 -->
          <el-table-column show-overflow-tooltip prop="reviewTime" label="审核时间" width="128" />

          <!-- 操作 -->
          <el-table-column fixed="right" label="操作" width="60">
            <template #default="scope">
              <span class="waiting_x" v-if="scope.row.status == 1" @click="viewCheck(scope.row)"
                >审核</span
              >
              <span class="waiting_pass" v-else>审核</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 页码 -->
      <div class="footer">
        <Pagination
          ref="pagination"
          :list_total="total"
          @size-change="getspareWork"
          @current-change="getspareWork"
        />
      </div>

      <!-- 费用审核弹出框 -->
      <CheckParts
        v-if="checkDialog"
        :workId="workId"
        :checkDialog="checkDialog"
        :partsId="partsId"
        @assign-dialog="checkDialog = false"
        @update-list="getspareWork()"
      />

      <!-- 查看详细弹出框 -->
      <PartsDetail
        v-if="detailDialog"
        :partsId="partsId"
        :checkDialog="detailDialog"
        @assign-dialog="detailDialog = false"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { ref, onMounted, reactive, watch } from 'vue'
  import { Search, RefreshRight } from '@element-plus/icons-vue'
  import { useRoute, useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import { spareWork } from '@/api/parts'
  import CheckParts from './components/CheckParts.vue'
  import PartsDetail from './components/PartsDetail.vue'
  import DateRange from '@/components/DateRange.vue'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.order.orderPart,
  })

  // 当前路由
  const route = useRoute()

  // 总路由
  const router = useRouter()
  const loading = ref(false)
  const pagination = ref()
  const total = ref(0)
  let tableDataList = ref(null)
  const checkDialog = ref(false)
  const detailDialog = ref(false)
  let data = reactive({
    createEndTime: '', //申请结束时间
    createStartTime: '', //申请开始时间
    limit: 0,
    networkSpareType: null, //	服务商配件类型：1-自购配件，2-服务商仓库配件
    oldCopeWay: null, //	旧件处理方式：1-废弃，2-旧件退回
    page: 0,
    status: null, //工单配件状态：1-待审核、2-已通过、3-已驳回、4-已撒回，5-已取消
    type: null, //申请类型：1-商家配件，2-服务商配件
    workNo: '', //工单单号
    workSpareNo: '', //配件单号
  })

  const partsId = ref(null)
  const workId = ref(null)
  // 服务费用项目状态
  const options = [
    { value: 1, name: '待审核' },
    { value: 2, name: '已通过' },
    { value: 3, name: '已驳回' },
    { value: 4, name: '已撒回' },
    { value: 5, name: '已取消' },
  ]
  //申请类型
  const options1 = [
    { value: 1, name: '商家配件' },
    { value: 2, name: '服务商配件' },
  ]
  // 旧件处理方式
  const options2 = [
    { value: 1, name: '废弃' },
    { value: 2, name: '旧件退回' },
  ]
  // 服务商配件类型
  const options3 = [
    { value: 1, name: '自购配件' },
    { value: 2, name: '服务商仓库配件' },
  ]

  // 费用审核
  const viewCheck = (n: any) => {
    checkDialog.value = true
    partsId.value = n.id
    workId.value = n.workId
  }
  const goBack = () => {
    router.push('/order/preturn')
  }
  // 查看工单
  const goOrder = (n: string) => {
    router.push('/order/odetail/' + n)
  }
  // 查看费用详细
  const viewDetail = (n: number) => {
    detailDialog.value = true
    partsId.value = n
  }

  // 日期范围组件实例
  const dateRangeRef = ref<InstanceType<typeof DateRange> | null>(null)

  // 开始日期是否大于结束日期
  const isStartDateGreaterThanEndDate = ref(false)

  // 日期更新事件
  const handleDateChange = (param: {
    startDate: string
    endDate: string
    isStartDateGreaterThanEndDate: boolean
  }) => {
    data.createStartTime = param.startDate
    data.createEndTime = param.endDate
    isStartDateGreaterThanEndDate.value = param.isStartDateGreaterThanEndDate
    if (param.isStartDateGreaterThanEndDate) {
      ElMessage({
        type: 'error',
        message: '开始日期不能大于结束日期',
      })
    }
  }

  // 重置
  const onReset = () => {
    if (dateRangeRef.value) {
      dateRangeRef.value.resetDateRange()
      isStartDateGreaterThanEndDate.value = false
    }
    Object.assign(data, {
      createEndTime: '', // 申请结束时间
      createStartTime: '', // 申请开始时间
      limit: 0,
      networkSpareType: null, // 服务商配件类型：1-自购配件，2-服务商仓库配件
      oldCopeWay: null, // 旧件处理方式：1-废弃，2-旧件退回
      page: 0,
      status: null, // 工单配件状态：1-待审核、2-已通过、3-已驳回、4-已撒回，5-已取消
      type: null, // 申请类型：1-商家配件，2-服务商配件
      workNo: '', // 工单单号
      workSpareNo: '', // 配件单号
    })
    getspareWork()
  }

  // 获取工单配件列表方法
  const getspareWork = async () => {
    if (isStartDateGreaterThanEndDate.value) {
      ElMessage({
        type: 'error',
        message: '开始日期不能大于结束日期',
      })
    }

    loading.value = true
    data.limit = pagination.value.size // 每页显示数量
    data.page = pagination.value.current // 当面页码
    await spareWork(data).then((res) => {
      if (res.data.success) {
        tableDataList.value = res.data.data.rows
        total.value = Number(res.data.data.total)
      } else {
        if (res.data.isError)
          ElMessage({
            showClose: true,
            message: res.data.message,
            type: 'error',
            duration: 4000,
            offset: 200,
          })
      }
      loading.value = false
    })
  }

  watch(
    () => route.name,
    (value) => {
      if (value === 'Orderparts') {
        getspareWork()
      }
    },
  )

  onMounted(() => {
    getspareWork()
  })
</script>

<style scoped lang="scss">
  @import './index';
</style>
